import 'package:flutter/material.dart';
import 'package:flutter_login_page/assets.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import 'login_form.dart';

class Login extends StatefulWidget {
  @override
  _LoginState createState() => _LoginState();
}

class _LoginState extends State<Login> with TickerProviderStateMixin {
  bool _isSelected = false;
  AnimationController animationController;
  Animation<double> _animation;

  @override
  void initState() {
    animationController = AnimationController(
        vsync: this, duration: Duration(milliseconds: 1000));
    _animation = Tween<double>(begin: 0, end: 1).animate(animationController);
    super.initState();
  }

  @override
  void dispose() {
    animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    ScreenUtil.instance = ScreenUtil.getInstance()..init(context);
    ScreenUtil.instance =
        ScreenUtil(width: 750, height: 1334, allowFontScaling: true);

    void _memberMe() {
      setState(() {
        print(_isSelected);
        _isSelected = !_isSelected;
        if (_isSelected) {
          animationController.forward();
        } else {
          animationController.reverse();
        }
      });
    }

    Widget checkButton(bool isSelected) => InkWell(
          onTap: () {
            _memberMe();
            print(_isSelected);
          },
          child: Row(children: <Widget>[
            Container(
              width: 16.0,
              height: 16.0,
              padding: EdgeInsets.all(2.0),
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                border: Border.all(width: 2.0, color: Colors.black),
              ),
              child: FadeTransition(
                opacity: _animation,
                child: isSelected
                    ? Container(
                        width: double.infinity,
                        height: double.infinity,
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color: Colors.black,
                        ),
                      )
                    : Container(),
              ),
            ),
            SizedBox(
              width: 10.0,
            ),
            Text('记住我'),
          ]),
        );

    Widget submitButton() => Container(
          width: ScreenUtil.getInstance().setWidth(330),
          height: ScreenUtil.getInstance().setHeight(100),
          decoration: BoxDecoration(
              gradient: LinearGradient(
                  colors: [Color(0xFF17ead9), Color(0xFF6078ea)]),
              borderRadius: BorderRadius.circular(6.0),
              boxShadow: [
                BoxShadow(
                    color: Color(0xFF6078ea).withOpacity(0.3),
                    offset: Offset(2, 4),
                    blurRadius: 8.0)
              ]),
          child: Material(
            elevation: 1,
            color: Colors.transparent,
            child: InkWell(
              onTap: () {},
              child: Center(
                child: Text(
                  '登录',
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: ScreenUtil.getInstance().setSp(40),
                      letterSpacing: 10),
                ),
              ),
            ),
          ),
        );

    Widget otherLoginButton(IconData iconData,Color backGroundColor,Size size,{Color iconColor = Colors.white})=>InkWell(
      borderRadius: BorderRadius.circular(40),
      hoverColor: Colors.red,
      splashColor: Colors.yellow,

      onTap: (){},
      child: Container(
        height: size.height,
        width: size.width,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(40),
            color:backGroundColor,
        ),
        child: Icon(iconData,color:iconColor,),
      ),
    );


    Widget horizontalLine() => Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          child: Container(
            width: ScreenUtil.getInstance().setWidth(120),
            height: 1.0,
            color: Colors.black26,
          ),
        );
    return Scaffold(
      backgroundColor: Colors.white,
      resizeToAvoidBottomInset: true,
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(top: 20.0, left: 50.0),
                child: Image.asset(Assets.IMAGE01),
              ),
            ],
          ),
          Positioned(
            left: 5,
            top: 30,
            child: Row(
              children: <Widget>[
                Image.asset(
                  Assets.LOGO,
                  height: ScreenUtil.getInstance().setWidth(110),
                  width: ScreenUtil.getInstance().setHeight(110),
                ),
                Text('导游DIY',
                    style: TextStyle(
                        fontSize: ScreenUtil.getInstance().setSp(20),
                        letterSpacing: 1,
                        fontWeight: FontWeight.bold))
              ],
            ),
          ),
          SingleChildScrollView(
            padding: const EdgeInsets.only(left: 28.0, right: 28, top: 40),
            child: Column(
              children: <Widget>[
                SizedBox(
                  height: ScreenUtil.getInstance().setHeight(180),
                ),
                LoginForm(),
                SizedBox(
                  height: ScreenUtil.getInstance().setHeight(40),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    checkButton(_isSelected),
                    submitButton(),
                  ],
                ),
                SizedBox(
                  height: 20.0,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    horizontalLine(),
                    Text("其他登录方式"),
                    horizontalLine()
                  ],
                ),
                SizedBox(height: 40,),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    otherLoginButton(IconData(0x0e903,fontFamily: 'brand'),Colors.green,Size(40,40)),
                    SizedBox(width:20,),
                    otherLoginButton(IconData(0x0e902,fontFamily: 'brand'),Colors.green,Size(40,40)),
                    SizedBox(width:20,),
                    otherLoginButton(IconData(0xe901,fontFamily: 'brand'),Colors.green,Size(40,40)),
                    SizedBox(width:20,),
                    otherLoginButton( IconData(0xe900,fontFamily: 'brand'),Colors.green,Size(40,40))
                  ],
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}
